<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>

  <meta charset="UTF-8">

  <title>MES-控制台</title>
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
    <link rel="stylesheet" href="css/zhuan.css" media="screen" type="text/css" />
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body background="/img/aa.png">
<header>
  <ul class="nav nav-tabs">
    <li ><a style="background:url(/img/chi.jpg)" href="/mainShow">巡视台</a></li>
    <li class="active"><a href="#"><b>控制台</b></a></li>
      <li style="margin-left: 80%"><a class="btn btn-default"href="/out"><b>退出</b></a></li>
  </ul>

</header>
<span hidden th:text="${path}"></span>
<!-- 总开关-->
  <section style="background:url(/img/ae.jpg);width: 100%;height: 100px;" >
    <div class="navbar-header" style="width: 200px;" >
      <h1 class="navbar-brand" style="color: #449ba2;margin-top: 20px;margin-left: 50px;">总控开关</h1>
    </div>
    <div>
      <!-- 表示一个成功的或积极的动作 -->
      <button type="button" onclick="start('total')" class="btn btn-success" style="margin: 30px 50px" >整线启动按钮</button>
      <!-- 表示一个危险的或潜在的负面动作 -->
      <button type="button" onclick="stop('total')" class="btn btn-danger" style="margin: 30px 50px" >整线暂停</button>

      <button type="button" onclick="end('total')" class="btn btn-danger" style="margin: 30px 50px" >整线停止按钮</button>
    </div>
  </section>
  <section style="background:url(/img/bc.jpg);width: 100%;height: 100px;" >
    <div class="navbar-header" style="width: 200px;" >
      <h1 class="navbar-brand" style="color: #449ba2;margin-top: 20px;margin-left: 50px;">生产控制</h1>
    </div>
    <div>
      <!-- 表示一个成功的或积极的动作 -->
      <button type="button" onclick="product('one')" class="btn btn-warning" style="margin: 30px 100px" >生产一个物料</button>
      <!-- 表示一个危险的或潜在的负面动作 -->
      <button type="button" onclick="start('ceshi')" class="btn btn-danger" style="margin: 30px 50px" >开启测试</button>
      <button type="button" onclick="end('ceshi')" class="btn btn-danger" style="margin: 30px 50px" >关闭测试</button>

      <button type="button" onclick="product('four')" class="btn btn-warning" style="margin: 30px 50px" >生产四个物料</button>
    </div>
  </section>



<!--第一工作站 -->
<section style="background:url(/img/b.jpg);width: 100%;height: 100px;" >
    <div class="navbar-header"  style="width: 200px;" >
      <h1 class="navbar-brand" style="color: #449ba2;margin-top: 30px;margin-left: 50px;">第一工作站</h1>
    </div>
    <div class="">
      <!-- 表示一个成功的或积极的动作 -->
      <button type="button" onclick="start('first')" class="btn btn-success" style="margin: 30px 100px" >点击运行</button>
      <!-- 表示一个危险的或潜在的负面动作 -->
      <button type="button" onclick="end('first')" class="btn btn-danger" style="margin: 30px 100px" >点击停止</button>
    </div>
  </section>
<section style="background:url(/img/b.jpg);width: 100%;height: 100px;" >
    <div class="navbar-header"  style="width: 200px;" >
      <h1 class="navbar-brand" style="color: #449ba2;margin-top: 30px;margin-left: 50px;">第二工作站</h1>
    </div>
    <div class="sticker-lable">
      <!-- 表示一个成功的或积极的动作 -->
      <button type="button" onclick="start('second')" class="btn btn-success" style="margin: 30px 100px" >点击运行</button>
      <!-- 表示一个危险的或潜在的负面动作 -->
      <button type="button" onclick="end('second')" class="btn btn-danger" style="margin: 30px 100px" >点击停止</button>
    </div>
  </section>
<section style="background:url(/img/b.jpg);width: 100%;height: 100px;" >
    <div class="navbar-header"  style="width: 200px;" >
      <h1 class="navbar-brand" style="color: #449ba2;margin-top: 30px;margin-left: 50px;">第三工作站</h1>
    </div>
    <div class="sticker-lable">
      <!-- 表示一个成功的或积极的动作 -->
      <button type="button" onclick="start('three')" class="btn btn-success" style="margin: 30px 100px" >点击运行</button>
      <!-- 表示一个危险的或潜在的负面动作 -->
      <button type="button" onclick="end('three')" class="btn btn-danger" style="margin: 30px 100px" >点击停止</button>
    </div>
  </section>
<section style="background:url(/img/b.jpg);width: 100%;height: 100px;" >
    <div class="navbar-header"  style="width: 200px;" >
      <h1 class="navbar-brand" style="color: #449ba2;margin-top: 50px;margin-left: 50px;">第四工作站</h1>
    </div>
    <div class="sticker-lable">
      <!-- 表示一个成功的或积极的动作 -->
      <button type="button" onclick="start('four')" class="btn btn-success" style="margin: 60px 100px" >点击运行</button>
      <!-- 表示一个危险的或潜在的负面动作 -->
      <button type="button" onclick="start('four')" class="btn btn-danger" style="margin: 60px 100px" >点击停止</button>
    </div>
  </section>
</body>
<script th:inline="javascript">
  //共有变量
  var model ;
  var socket;
  var open = false;
  init();
  function init() {

      // console.log(path);
    openSocket();
  }
  function stop(f){
    if(f=='total'){
      socket.send('[00+12]');
      alert("总控开关已暂停");
    }
  }
  function product(f){
    if(f=='one'){
      socket.send('[00+14]');
      alert("已生产一个物料");
    }else if(f=='four'){
        socket.send('[00+15]');
        alert("已生产四个物料");
    }else{
        alert("你发的啥？");
    }
  }

  function start(f){
      if(f=='ceshi'){
          socket.send('[00+0]');
          alert("总控开关已启动测试");
      }
    if(f=='total'){
      socket.send('[00+11]');
      alert("总控开关已启动");
    }else if(f=="first"){
      socket.send('[00+16]');
      alert("第一工作站机器人已开启");
    }else if(f=="second"){
      socket.send('[00+18]');
      alert("第二工作站机器人已开启");
    }else if(f=="three"){
      socket.send('[00+1A]');
      alert("第三工作站机器人已开启");
    }else if(f=="four"){
      socket.send('[00+1C]');
      alert("第四个工作站机器人已开启");
    }

  }
  //点击事件
  function end(f){
      if(f=='ceshi'){
          socket.send('[00+1]');
          alert("总控开关已启动测试");
      }
    if(f=='total'){
      socket.send('[00+13]');
      alert("总控开关已关闭");
    }else if(f=="first"){
      socket.send('[00+17]');
      alert("第一工作站机器人已关闭");
    }else if(f=="second"){
      socket.send('[00+19]');
      alert("第二工作站机器人已关闭");
    }else if(f=="three"){
      socket.send('[00+1B]');
      alert("第三个工作站机器人已关闭");
    }else if(f=="four"){
      socket.send('[00+1D]');
      alert("第四个工作站机器人关闭");
    }
  }

  function openSocket(path) {
    if (typeof (WebSocket) == "undefined") {
      console.log("您的浏览器不支持WebSocket");
    } else {
      console.log("您的浏览器支持WebSocket");
      //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
      //等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");
      //var socketUrl="${request.contextPath}/im/"+$("#userId").val();
        var path = [[${path}]];

      var socketUrl = path+"/imserver/" + new Date().getTime();
        console.log(socketUrl);
        socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
      if (socket != null) {
        socket.close();
        socket = null;
      }
      socket = new WebSocket(socketUrl);
      //打开事件
      socket.onopen = function () {
        console.log("websocket已打开");
        //socket.send("这是来自客户端的消息" + location.href + new Date());
      };
      //获得消息事件
      socket.onmessage = function (msg) {
        //TODO 发现消息进入    开始处理前端触发逻辑
         console.log(msg);
         //不需要处理
      };
      //关闭事件
      socket.onclose = function () {
        console.log("websocket已关闭");
      };
      //发生了错误事件
      socket.onerror = function () {
        console.log("websocket发生了错误");
      }
    }
  }





</script>

</html>